const debug = process.env.NODE_ENV === 'dev'
const TerserPlugin = require('terser-webpack-plugin')
const PROXY_API = 'http://47.96.39.4:10001/'
const path = require('path')
const timestamp = new Date().getTime()
const pxtorem = require('postcss-pxtorem')

function resolve(dir) {
    return path.join(__dirname, dir);
}
module.exports = {
    publicPath: process.env.NODE_ENV === 'development' ? '/' : '/zqjx-h5/', // 基本路径
    // outputDir: 'dist', // 输出文件目录
    lintOnSave: false, // eslint-loader 是否在保存的时候检查
    configureWebpack: config => {
        // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
        // config.output.filename = `[name].${timestamp}.js`
        // config.output.chunkFilename = `[name].${timestamp}.js`
        config.output.filename = `[name].js`
        config.output.chunkFilename = `[name].js`
        if (debug) {
            // 为开发环境修改配置...
            config.mode = 'development'
            config.devtool = 'cheap-module-eval-source-map'
        } else {
            // 将每个依赖包打包成单独的js文件
            let optimization = {
                runtimeChunk: "single",
                splitChunks: {
                    chunks: "all",
                    maxInitialRequests: Infinity,
                    minSize: 20000,
                    cacheGroups: {
                        vendor: {
                            test: /[\\/]node_modules[\\/]/,
                            name(module) {
                                // get the name. E.g. node_modules/packageName/not/this/part.js
                                // or node_modules/packageName
                                const packageName = module.context.match(
                                    /[\\/]node_modules[\\/](.*?)([\\/]|$)/
                                )[1];
                                // npm package names are URL-safe, but some servers don't like @ symbols
                                return `npm.${packageName.replace("@", "")}`;
                            }
                        }
                    }
                },
                minimizer: [
                    new TerserPlugin({
                        sourceMap: false,
                        terserOptions: {
                            compress: {
                                drop_console: false
                            }
                        }
                    })
                ]
            };
            Object.assign(config, {
                optimization
            });
        }
    },
    chainWebpack: config => {
        // 移除 prefetch 插件
        config.plugins.delete('preload')
        config.plugins.delete('prefetch')
            //配置路径别名
        config.resolve.alias
            .set("@", resolve("src"))
            .set("assets", resolve("src/assets"))
            .set("components", resolve("src/components"))
            .set("public", resolve("public"));
    },
    productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
    // css相关配置
    css: {
        extract: {
            // filename: `[name].${timestamp}.css`,
            // chunkFilename: `[name].${timestamp}.css`
            filename: `[name].css`,
            chunkFilename: `[name].css`
        },
        sourceMap: false, // 开启 CSS source maps?
        loaderOptions: {
            less: {
                lessOptions: {
                    modifyVars: {
                        hack: `true; @import "${path.resolve(__dirname, 'src/vars.less')}";`
                    }
                }
            },
            postcss: {
                plugins: [
                    require('autoprefixer')({
                        overrideBrowserslist: ['Android >= 4.0', 'iOS >= 7'] //支持系统版本
                    }),
                    pxtorem({
                        rootValue: 37.5, // 根字体大小，如果设计图是750的话 记得除2（vant-UI的官方根字体大小是37.5）
                        propList: ['*'], // 作用在哪些属性上 我这里用的是通配符
                        // selectorBlackList: ['vant-'], // 将哪些html元素排除在外，我这里添加了一个vant的
                        replace: true,
                        mediaQuery: false,
                        minPixelValue: 0,
                        // exclude: /node_modules/i
                    })
                ]
            } // 这里的选项会传递给 postcss-loader
        } // css预设器配置项 详见https://cli.vuejs.org/zh/config/#css-loaderoptions
    },
    // parallel: require('os').cpus().length > 1, // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。
    // pwa: {}, // PWA 插件相关配置 see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
    // // webpack-dev-server 相关配置
    devServer: {
        port: 7000,
        open: true,
        // disableHostCheck: true,
        // lintOnSave: false,
        // open: process.platform === 'darwin',
        // host: '0.0.0.0', // 允许外部ip访问
        // port: 8022, // 端口
        // https: false, // 启用https
        // overlay: {
        //     warnings: true,
        //     errors: true
        // }, // 错误、警告在页面弹出
        proxy: {
            [process.env.VUE_APP_BASE_API]: {
                target: PROXY_API,
                // secure: false,// 如果是https接口，需要配置这个参数
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                    ['^' + process.env.VUE_APP_BASE_API]: 'zqjx-api'
                }
            }
        }
    }
}